<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijbubblechart.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#wijbubblechart").wijbubblechart({
                minimumSize: 3,
                MaximumSize: 15,
                axis: {
                    y: {
                        text: "Swoon"

                    },
                    x: {
                        text: ""
                    }
                },
                hint: {
                    content: function () {
                        return this.data.label + '\n x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1;
                    }
                },
                header: {
                    text: "Michael Buble Chart"
                },
                seriesStyles: [
                    {
                        opacity: 0.5
                    }
                ],
                chartLabel: {
                    position: "outside"
                },
                seriesList: [{
                    label: "Hits",
                    legendEntry: true,
                    data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 53, 10, 50] },
                    markers: {
                        symbol: [
                                {
                                    index: 4,
                                    url: "http://cdn.wijmo.com/images/buble.png"
                                },
                                {
                                    index: 3,
                                    url: "http://cdn.wijmo.com/images/buble.png"
                                },
                                {
                                    index: 2,
                                    url: "http://cdn.wijmo.com/images/buble.png"
                                },
                                {
                                    index: 1,
                                    url: "http://cdn.wijmo.com/images/buble.png"
                                },
                                {
                                    index: 0,
                                    url: "http://cdn.wijmo.com/images/buble.png"
                                }
                            ]
                    },
                    inVisibleMarkLabels: [1, 4]
                }]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Symbols</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h3>
                Buble Chart Visualization</h3>
            <div id="wijbubblechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>This sample use <b>markers</b> to customize the gauge background image.</p>
        </div>
    </div>
</body>
</html>
